<template>
    <div class="list">
        <div class="top">
            <p>未完成</p>
        </div>
        <transition name="" mode="">
            <ul>
                <li v-for="(item, i) in list" :key="i" v-show="item.status == 0">
                    <input type="checkbox" name="" id="" v-model="item.status" @click="(1, i)">
                    <p>{{ item.title }}</p>
                    <button @click="change(2, i)">取消</button>
                </li>
            </ul>
        </transition>
        <div class="top">
            <p>已完成</p>
        </div>
        <transition name="" mode="">
            <ul>
                <li v-for="(item, i) in list" :key="i" v-show="item.status == 1">
                    <input type="checkbox" name="" id="" v-model="item.status" @click="(2, i)">
                    <p>{{ item.title }}</p>
                    <button @click="change(2, i)">取消</button>
                </li>
            </ul>
        </transition>
        <div class="top">
            <p>取消</p>
        </div>
        <transition name="" mode="">
            <ul>
                <li v-for="(item, i) in list" :key="i" v-show="item.status == 2">
                    <input type="checkbox" name="" id="" v-model="item.status" @click="(3, i)">
                    <p>{{ item.title }}</p>
                    <button @click="change(0, i)">取消</button>
                </li>
            </ul>
        </transition>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            list: ''
        }
    },
    created() {
        this.list = this.$store.state.list
    },
    props: {},
    computed: {},
    methods: {
        change(status, i) {
            this.$store.commit('change', { status: status, i: i })
        }
    },
}
</script>
<style scoped lang='scss'>
.list {
    width: 100%;

    .top {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: aqua;

        p {
            padding-left: 20px;
        }
    }

    li {
        width: 100%;
        height: 50px;
        display: flex;
        line-height: 50px;

        input {
            flex: 20%;
            width: 20px;
            height: 20px;
            margin-top: 15px;
        }

        p {
            flex: 70%
        }

        button {
            flex: 8%;
            width: 40px;
            height: 20px;
            margin-top: 15px;
            margin-right: 10px;
        }
    }
}
</style>
